<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { KeyValues } from '../../utils/types'
import { genKey, ruleStatusSelect, treeUtil } from '../../utils';
import UiTreeTransfer from './TreeTransfer.vue'
import { apiDict, apiAPI, apiRule } from '../../api';
import { ElMessage } from "element-plus"



const form = ref<KeyValues>({})

const cls = 'page-measure-rule-add'

const httpCode = ref([])
const apiIds = ref([])
const loading = ref(false)
const loading1 = ref(false)
const jsonData =ref([])
const transferRef = ref()
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    apiAPI
    .pageList({name:query})
    .then(res => {
      apiIds.value = res.rows
      loading.value = false
    })

  } else {
    apiIds.value = []
  }
}
const getJson = ()=>{
  const id = form.value.apiId
  if(id){
    apiAPI.get(id).then(res => {
      jsonData.value = res.data.successExample? treeUtil.jsonResultToTree(JSON.parse(res.data.successExample)):[]
      if(!jsonData.value.length){
        ElMessage.warning('选择APIID解析JSON数据为空')
      }
    })
  }else{
    ElMessage.warning('请先选择APIID')
  }
}
const emit = defineEmits(['close', 'submitted'])

const onOk = async () => {
  form.value = {... form.value, apiRuleItems: transferRef.value.getForm() }
  loading1.value = true
  try {
    await apiRule.save(form.value)
    emit('submitted')
  } finally {
    loading1.value = false
  }
}

onMounted(() => {
  apiDict
    .getList(apiDict.DictType.HTTP_CODE)
    .then(res => {
      httpCode.value = res.rows
    })
})


</script>

<template>
  <ElDialog ref="dialogRef" title="编辑" :class=" { activeClass: jsonData.length > 0 }">
    <div :class="cls">
      <ElForm :class="`${cls}_form`" label-width="5em" label-suffix=" :">
      <div :class="`${cls}_form_item`">
        <ElFormItem label="规则名">
          <ElInput v-model="form.ruleName" placeholder="请输入"/>
        </ElFormItem>
        <ElFormItem label="APIID">
          <ElSelect clearable v-model="form.apiId" 
            filterable remote
            reserve-keyword
            :remote-method="remoteMethod"
            :loading="loading">
            <ElOption v-for="_ in apiIds" :key="_.dictValue" :value="_.apiId" :label="_.name"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="响应码">
          <ElSelect clearable v-model="form.responseCode" filterable allow-create default-first-option>
            <ElOption v-for="_ in httpCode" :key="_.dictValue" :value="_.dictValue" :label="_.dictValue"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="状态">
          <ElRadioGroup v-model="form.status">
            <ElRadio  v-for="_ in ruleStatusSelect.data" :key="_.value"  :label="_.value">{{ _.label }}</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </div>
      <ElFormItem label-width="0">
        <ElButton type="primary" @click="getJson()" plain>解析JSON</ElButton>
      </ElFormItem>
      <ElFormItem label-width="0" v-if="jsonData.length">
        <UiTreeTransfer :json-data = "jsonData" ref="transferRef"> </UiTreeTransfer>
      </ElFormItem>
        <div :class="`${cls}_btns`">
          <ElButton type="primary"  :loading="loading1" @click="onOk">保存</ElButton>
        </div>
      </ElForm>
    </div>
</ElDialog>
</template>

<style lang="scss">
.activeClass{
  width: 920px;
}
.page-measure-rule-add_form_item {
  max-width: 620px;
}
.page-measure-rule-add_btns{
  text-align: center;
}
</style>
